<template>
	<view class="page box-c">
		<view class="img-view">
			<view class="">
				<image class="bg" src="../../static/order/bg.png"></image>
			</view>
			<!-- 已付款 -->
			<view class="" v-if="orderInfo.orderStatus ==1">
				<image class="wait" v-if="orderInfo.takesState==1" src="../../static/order/daipeisong.png"
					mode="widthFix">
				</image>
				<image class="wait" v-if="orderInfo.takesState==-1" src="../../static/order/dengdaiziti.png"
					mode="widthFix">
				</image>
				<image class="wait" v-if="orderInfo.takesState==3 && orderInfo.orderStatus!=2"
					src="../../static/order/daishouhuo.png" mode="widthFix">
				</image>
				<image class="wait" v-if="orderInfo.takesState==2 && orderInfo.orderStatus!=2"
					src="../../static/order/peisongzhong.png" mode="widthFix">
				</image>

			</view>
			<!-- 已完成 -->
			<view class="" v-if="orderInfo.orderStatus ==2">
				<image class="wait" src="../../static/order/wancheng.png" mode="widthFix"></image>

			</view>
			<!-- 已取消 -->
			<view class="" v-if="orderInfo.orderStatus ==3">

			</view>
			<!-- 退款中 -->
			<view class="" v-if="orderInfo.orderStatus ==-3">
				<image class="wait" src="../../static/order/tuikuanzhong.png" mode="widthFix">
				</image>

			</view>
			<!-- 已退款 -->
			<view class="" v-if="orderInfo.orderStatus ==-4">
				<image class="wait" src="../../static/order/yituikuan.png" mode="widthFix">
				</image>

			</view>
			<!-- 退款失败 -->
			<view class="" v-if="orderInfo.orderStatus ==-5">
				<image class="wait" src="../../static/order/tuikuanshibai.png" mode="widthFix">
				</image>



			</view>

			<view class="bg-box p-2" v-if="orderInfo.isTakes==1">
				<view class="">
					收货人信息
				</view>
				<view class="box">
					<view class="dingwei mr-2 mt-1">
						<image src="../../static/order/dingwei.png" mode=""></image>
					</view>
					<view class="people">
						<view class="box">
							<text>{{orderInfo.name}}</text>
							<text class="ml-2">{{orderInfo.phone}}</text>
						</view>
						<view class="">
							<text>{{orderInfo.province}}{{orderInfo.city}}{{orderInfo.district}}{{orderInfo.address}}</text>
						</view>
					</view>
				</view>

			</view>
			<view class="bg-box p-2" v-if="orderInfo.isTakes==2">
				<view class="">
					自取信息
				</view>
				<view class="box-c ml-1">
					<view class="">
						时间：{{orderInfo.takesDateTime}}
					</view>
					<view class="">
						姓名：{{orderInfo.name}}
					</view>
					<view class="">
						电话：{{orderInfo.phone}}
					</view>


				</view>

			</view>
		</view>
		<view class="bg-box2 p-2">
			<view class="order-title" style="">订单信息</view>
			<view class="box mt-2 product" v-for="(item,index) in orderInfo.goodSkuDto">
				<view class="flex-1">
					<image :src="item.image" mode="widthFix"></image>
				</view>
				<view class="flex-3 box d-jc-sb ml-2">
					<view class="box-c d-jc-sb product-name">
						<text class="" style="width: 350rpx;">
							{{item.goodsName}}
						</text>
						<text>
							x{{item.number}}
						</text>
					</view>
					<view class="box-c d-jc-end total1">
						<text>{{item.goodsPrice}}积分</text>
					</view>
				</view>


			</view>
			<view class="line my-1">

			</view>
			<view class="box-c text-parameter">
				<view class="box d-jc-sb">
					<text>订单金额</text>
					<text>{{orderInfo.goodsPrice}}积分</text>
				</view>
				<view class="box d-jc-sb">
					<text>优惠金额</text>
					<text>0积分</text>
				</view>
				<view class="box d-jc-sb">
					<text>运费</text>
					<text>0积分</text>
				</view>
			</view>
			<view class="line my-1">

			</view>
			<view class="text-parameter">
				<view class="box ">
					<text>订单编号：</text>
					<text>{{orderInfo.orderNumber}}</text>
				</view>
				<view class="box">
					<text>付款时间：</text>
					<text>{{orderInfo.createTime}}</text>
				</view>
			</view>
		</view>

		
		<view class="" v-if="orderInfo.orderStatus ==1">
			<view class="bottom box-c">
				<!-- 已支付 -->
				<view v-if="orderInfo.takesState==1" @tap="updateTakes(2)">
					立即配送
				</view>
				<view v-if="orderInfo.takesState==2" @tap="updateTakes(3)">
					确认送达
				</view>

			</view>
		</view>
		<!-- 退款中 -->
		<view class="" v-if="orderInfo.orderStatus ==-3">
			<view class="bottom box-c">
				<!-- 已支付 -->
				<view v-if="orderInfo.takesState==1">
					同意退款
				</view>

			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderInfo: '',
				orderNumber: this.$store.state.orderNumber,
				refundInfoData: ''


			}
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.productHeight = res.windowHeight - uni.upx2px(660) //windoHeight为窗口高度，主要使用的是这个
				}
			})

		},
		created() {
			this.getShopOrdersInfo()
		},
		methods: {
			
			updateTakes(state) {
				debugger
				this.$api.updateTakes({
					takesState: state,
					orderNumber: this.orderNumber
				}).then(res => {
					if (res.data.success) {
						uni.showToast({
							title: '成功',
							duration: 1000,
						});
						setTimeout(function() {
							uni.navigateBack(1)
						}, 1000);
					} else {
						uni.showToast({
							title: '操作失败',
							duration: 1000,
							icon: 'none'
						});

					}


				})
			},
			getShopOrdersInfo() {
				this.$api.getShopOrdersInfo({
					orderNumber: this.orderNumber
				}).then((res) => {
					this.orderInfo = res.data.dataMap
					console.log(res)

				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.page {
		background-color: #F8F8F8;
		min-height: 100vh;
	}

	.product-name {
		text:nth-child(1) {
			font-weight: bold;
			font-size: 30rpx;
		}

		text:nth-child(2) {
			font-weight: bold;
			font-size: 30rpx;
			color: #666666;
		}
	}

	.total1 {
		color: #FF5551;
		font-size: 32rpx;
	}

	.text-parameter {
		font-size: 26rpx;
		color: #999999;
	}

	.line {
		width: 100%;
		height: 2rpx;
		background-color: #EEEEEE;
	}

	.order-title {
		position: sticky;
		top: 85rpx;
		z-index: 99;
		background-color: #fff;
		font-weight: bold;
		font-size: 30rpx;
	}

	.bottom {
		width: 750rpx;
		height: 120rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;

		view {
			width: 200rpx;
			height: 80rpx;
			background-color: #ff5551;
			right: 20rpx;
			position: absolute;
			border-radius: 50rpx;
			top: 20rpx;
			text-align: center;
			line-height: 80rpx;
			color: #fff;
		}
	}

	.product {
		image {
			height: 150rpx;
			width: 150rpx;
			border-radius: 10rpx;
		}

	}

	.bg-box2 {
		width: 650rpx;
		background-color: #fff;
		min-height: 200rpx;
		margin: 0 auto;
		margin-top: 130rpx;
		border-radius: 12rpx;
		box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05);

		.orderInfo {
			image {
				width: 200rpx;
				height: 200rpx;
			}
		}

	}

	

	

	.bg-box {
		width: 650rpx;
		min-height: 180rpx;
		position: absolute;
		top: 200rpx;
		left: 30rpx;

		view:nth-child(1) {
			color: #333333;
			font-weight: bold;
			font-size: 30rpx;
		}

		.people {
			view:nth-child(1) {
				color: #333333;
				font-weight: bold;
				font-size: 30rpx;
			}

			view:nth-child(2) {
				color: #999999;
				font-size: 28rpx;
			}


		}

		.dingwei {
			image {
				width: 50rpx;
				height: 50rpx;
			}
		}

	}

	image,
	swiper,
	.img-view {
		width: 750rpx;
		height: 320rpx;
		position: relative;

		.bg {
			position: relative;
		}

		.wait {
			position: absolute;
			left: 39%;
			margin-top: 90rpx;
			width: 180rpx;
			height: 41rpx;
			top: 30rpx;
			z-index: 9;
		}

	}

	.page-section-title {
		margin-top: 50rpx;
	}
</style>
